<template>
	<view>
		<view class="procuct-list" v-if="orderList.length > 0">
			<view class="product-item" v-for="(item, index) in orderList" :key="index"
				@click="enterDetail(item, index)">
				<!-- 头部 -->
				<view class="header-area">
					<view style="display: flex;align-items: center;">
						<view class="take-type">{{item.type}}</view>
						<view class="shop-name">{{item.shopName}}</view>
					</view>
					<view class="schedule-ing" :class="item.schedule == '已完成'?'done':'marking'">{{item.schedule}}</view>
				</view>
				<!-- 主体 -->
				<view class="product-detail" v-for="(product, index) in item.products" :key="index">
					<!-- 封面 -->
					<img class="img-cover" :src="product.cover" alt="" />
					<!-- 详细信息 -->
					<view class="detail-area">
						<p class="product-name">{{product.productName}}</p>
						<view class="remark-area" style="display: flex;align-items: center;">
							<p class="buy-capacity">{{product.capacity}}</p>,
							<p class="buy-ice">{{product.ice}}</p>,
							<p class="buy-sugar">{{product.sugar}}</p>
						</view>
					</view>
					<!-- 购买信息 -->
					<view class="buy-detail">
						<view class="buy-price">￥{{allPrice(product.price, product.number)}}</view>
						<view class="buy-number">共{{product.number}}件</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="order" textSize="15px" width="400" height="400"
			icon="http://cdn.uviewui.com/uview/empty/order.png" marginTop="20">
		</u-empty>
	</view>
</template>

<script>
	export default {
		props: {
			// 商品数据
			orderList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 进入详情
			enterDetail(row, index) {
				uni.navigateTo({
					url: '/pages/views/order/order-detail/order-detail?id=' + index
				});
			},
			// 总价格
			allPrice(price, number) {
				return price * number
			},
		},
		computed: {

		},

	}
</script>

<style scoped lang="scss">
	.procuct-list {
		background-color: #f7f7f7;
		padding: 30rpx 15rpx 5rpx 15rpx;
		font-size: 26rpx;

		.product-item {
			background-color: white;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			.header-area {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.take-type {
					border: 2rpx solid #0f559f;
					padding: 4rpx 10rpx;
					color: #0f559f;
				}

				.shop-name {
					font-size: 34rpx;
					font-weight: bolder;
					color: black;
					margin-left: 10rpx;
				}

				.schedule-ing {
					font-weight: bold;
				}
			}

			.product-detail {
				display: flex;
				align-items: flex-start;
				cursor: pointer;
				margin-bottom: 20rpx;

				.img-cover {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.detail-area {
					.product-name {}

					.remark-area {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #a8a8a8;
					}
				}

				.buy-detail {
					height: 100%;
					margin-left: auto;
					text-align: right;

					.buy-price {
						font-weight: bolder;
						font-size: 36rpx;
					}

					.buy-number {
						font-size: 24rpx;
						color: #a8a8a8;
					}
				}
			}
		}
	}

	.marking {
		color: #db3020;
	}

	.done {
		color: #0f559f;
	}
</style>